<template>
  <div class="sponsor-page">
    <div class="sponsor-container">
      <!-- 标题部分 -->
      <div class="header-section">
        <h1 class="main-title">赞助咖啡</h1>
        <p class="description">助我更实现创造价值</p>
      </div>

      <!-- 咖啡选项 -->
      <div class="coffee-options">
        <div v-for="coffee in coffeeOptions" :key="coffee.id" class="coffee-card" :class="coffee.theme">
          <!-- 咖啡图标区域 -->
          <div class="coffee-icon-wrapper">
            <img :src="coffee.iconSrc" :alt="coffee.name" class="coffee-svg-icon" />
          </div>

          <!-- 咖啡信息 -->
          <div class="coffee-info">
            <h3 class="coffee-name">{{ coffee.name }}</h3>
            <p class="coffee-price">{{ coffee.price }}</p>
          </div>

          <!-- 赞助按钮 -->
          <div class="sponsor-button-wrapper">
            <button class="sponsor-button" @click="handleSponsor(coffee)">赞助</button>
          </div>

          <!-- 底部描述 -->
          <div class="coffee-description">
            <p>{{ coffee.description }}</p>
            <p class="small-text">{{ coffee.smallText }}</p>
          </div>
        </div>
      </div>

      <!-- 底部说明 -->
      <div class="footer-section">
        <p class="footer-text">感谢您支持开源项目</p>
      </div>
    </div>

    <!-- 支付弹窗 -->
    <a-modal v-model:open="paymentModalVisible" title="赞助咖啡" :footer="null" centered width="450px">
      <div class="payment-modal">
        <div class="selected-coffee">
          <h3>{{ selectedCoffee?.name }} × {{ selectedQuantity }}杯</h3>
          <p class="total-price">¥{{ calculateTotalPrice() }}</p>
        </div>

        <!-- 支付方式单选 -->
        <div class="payment-options">
          <a-radio-group v-model:value="selectedPaymentMethod" @change="updateQRCode">
            <a-radio value="wechat">
              <wechat-outlined style="color: #07c160; margin-right: 4px" />
              微信
            </a-radio>
            <a-radio value="alipay">
              <alipay-outlined style="color: #1677ff; margin-right: 4px" />
              支付宝
            </a-radio>
          </a-radio-group>
        </div>

        <!-- 支付方式选择和二维码 -->
        <div class="payment-method-selector">
          <div class="qr-code-container">
            <img v-if="qrCodeSrc" :src="qrCodeSrc" alt="支付二维码" class="qr-code" />
          </div>
          <p class="payment-method-text">{{ selectedPaymentMethod === 'wechat' ? '微信支付' : '支付宝' }}</p>
        </div>

        <!-- 数量选择 -->
        <div class="quantity-selector">
          <div class="quantity-options">
            <div v-for="qty in getQuantityOptions()" :key="qty.value" class="quantity-option" :class="{ active: selectedQuantity === qty.value }" @click="selectQuantity(qty.value)">
              <span class="qty-text">{{ qty.value }}杯</span>
              <span class="qty-price">¥{{ qty.price }}</span>
            </div>
          </div>
        </div>

        <div class="payment-description">
          <p>{{ getPaymentDescription() }}</p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { AlipayOutlined, WechatOutlined } from '@ant-design/icons-vue'

// 导入SVG图片
import storyRed from '@/assets/storyRed.svg'
import storyGreen from '@/assets/storyGreen.svg'
import storyPurple from '@/assets/storyPurple.svg'

// 导入二维码图片 - 微信支付
import w10 from '@/assets/w-10.jpg'
import w20 from '@/assets/w-20.jpg'
import w30 from '@/assets/w-30.jpg'
import w50 from '@/assets/w-50.jpg'
import w100 from '@/assets/w-100.jpg'
import w200 from '@/assets/w-200.jpg'
import w300 from '@/assets/w-300.jpg'
import w500 from '@/assets/w-500.jpg'
import w1000 from '@/assets/w-1000.jpg'
import w3000 from '@/assets/w-3000.jpg'
import w5000 from '@/assets/w-5000.jpg'

// 导入二维码图片 - 支付宝
import z10 from '@/assets/z-10.jpg'
import z20 from '@/assets/z-20.jpg'
import z30 from '@/assets/z-30.jpg'
import z50 from '@/assets/z-50.jpg'
import z100 from '@/assets/z-100.jpg'
import z200 from '@/assets/z-200.jpg'
import z300 from '@/assets/z-300.jpg'
import z500 from '@/assets/z-500.jpg'
import z1000 from '@/assets/z-1000.jpg'
import z3000 from '@/assets/z-3000.jpg'
import z5000 from '@/assets/z-5000.jpg'

// 二维码图片映射
const qrCodeImages = {
  wechat: {
    10: w10,
    20: w20,
    30: w30,
    50: w50,
    100: w100,
    200: w200,
    300: w300,
    500: w500,
    1000: w1000,
    3000: w3000,
    5000: w5000
  },
  alipay: {
    10: z10,
    20: z20,
    30: z30,
    50: z50,
    100: z100,
    200: z200,
    300: z300,
    500: z500,
    1000: z1000,
    3000: z3000,
    5000: z5000
  }
}

// 响应式数据
const paymentModalVisible = ref(false)
const selectedCoffee = ref(null)
const selectedPaymentMethod = ref('wechat')
const selectedQuantity = ref(1)
const qrCodeSrc = ref('')

// 咖啡选项数据
const coffeeOptions = reactive([
  {
    id: 1,
    name: '粉色咖啡',
    price: '¥10.00 / 杯',
    unitPrice: 10,
    theme: 'pink-theme',
    description: '小小心意',
    smallText: '买杯咖啡给开发者 ❤️',
    iconSrc: storyRed,
    quantities: [1, 2, 3, 5, 10]
  },
  {
    id: 2,
    name: '青色咖啡',
    price: '¥100.00 / 杯',
    unitPrice: 100,
    theme: 'green-theme',
    description: '大力支持',
    smallText: '支持开源项目 ⭐',
    iconSrc: storyGreen,
    quantities: [1, 2, 3, 5, 10]
  },
  {
    id: 3,
    name: '紫色咖啡',
    price: '¥1000.00 / 杯',
    unitPrice: 1000,
    theme: 'blue-theme',
    description: '超级赞助',
    smallText: '让我更好创造价值 🚀',
    iconSrc: storyPurple,
    quantities: [1, 3, 5]
  }
])

// 处理赞助
const handleSponsor = (coffee) => {
  selectedCoffee.value = coffee
  selectedQuantity.value = 1
  selectedPaymentMethod.value = 'wechat'
  updateQRCode()
  paymentModalVisible.value = true
}

// 计算总价
const calculateTotalPrice = () => {
  if (!selectedCoffee.value) return 0
  return selectedCoffee.value.unitPrice * selectedQuantity.value
}

// 获取数量选项
const getQuantityOptions = () => {
  if (!selectedCoffee.value) return []
  return selectedCoffee.value.quantities.map((qty) => ({
    value: qty,
    price: selectedCoffee.value.unitPrice * qty
  }))
}

// 选择数量
const selectQuantity = (qty) => {
  selectedQuantity.value = qty
  updateQRCode()
}

// 更新二维码
const updateQRCode = () => {
  if (!selectedCoffee.value) return

  const totalPrice = calculateTotalPrice()
  const paymentType = selectedPaymentMethod.value

  // 从预导入的图片映射中获取二维码
  const qrCodeImage = qrCodeImages[paymentType]?.[totalPrice]

  if (qrCodeImage) {
    qrCodeSrc.value = qrCodeImage
  } else {
    console.warn(`二维码图片未找到: ${paymentType}-${totalPrice}.jpg`)
    qrCodeSrc.value = ''
  }
}

// 获取支付描述
const getPaymentDescription = () => {
  if (!selectedCoffee.value) return ''

  const qty = selectedQuantity.value
  const coffeeId = selectedCoffee.value.id

  if (coffeeId === 1) {
    // 粉色咖啡
    if (qty === 1) return '1杯提神，Bug 开始瑟瑟发抖 😊'
    if (qty === 2) return '2杯下去，灵感徐徐涌现 💫'
    if (qty === 3) return '3杯下去，CPU 满载运行，代码行云流水 🚀'
    if (qty === 5) return '5杯满血，精神抖擞迎接挑战 ⚡'
    if (qty === 10) return '10杯畅快，创意源源不断，成就感满满 🎯'
  } else if (coffeeId === 2) {
    // 青色咖啡
    if (qty === 1) return '1杯真香，够我快乐写一天代码 🧃'
    if (qty === 2) return '2杯带劲，连夜冲刺不带停 💪⚡️'
    if (qty === 3) return '3杯稳住全场，Bug 想靠近都不敢 🛡️🪲'
    if (qty === 5) return '5杯狂热，灵感一键爆表 🔥💡'
    if (qty === 10) return '10杯封神，开源路上如龙腾九天 🐲🚀'
  } else if (coffeeId === 3) {
    // 紫色咖啡
    if (qty === 1) return '1杯如金，注入灵魂燃料 🔥☕️'
    if (qty === 3) return '3杯觉醒，开发者化身超人 ⚡️👨‍💻'
    if (qty === 5) return '5杯开挂，代码自动补全灵感 ✨⌨️'
  }

  return `${qty}杯咖啡，满满的心意 ❤️`
}
</script>

<style scoped>
.sponsor-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafa 0%, #ecf1f9 100%);
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  align-items: center;
}

.sponsor-container {
  max-width: 1200px;
  width: 100%;
  margin-top: -15vh;
}

.header-section {
  text-align: center;
  margin-bottom: 60px;
}

.main-title {
  font-size: 48px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 20px 0;
  letter-spacing: 2px;
}

.subtitle {
  font-size: 20px;
  color: #7f8c8d;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.description {
  font-size: 16px;
  color: #95a5a6;
  margin: 0;
}

.coffee-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  gap: 40px;
  margin-bottom: 60px;
  justify-content: center;
}

.coffee-card {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.coffee-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.coffee-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--theme-color);
}

/* 主题颜色 */
.pink-theme {
  --theme-color: #ff6b9d;
  --theme-light: #ffe1ec;
}

.green-theme {
  --theme-color: #4ecdc4;
  --theme-light: #e0f7f5;
}

.blue-theme {
  --theme-color: #6c5ce7;
  --theme-light: #e8e4ff;
}

.coffee-icon-wrapper {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coffee-svg-icon {
  width: 120px;
  height: 120px;
  object-fit: contain;
  transition: all 0.3s ease;
}

.coffee-card:hover .coffee-svg-icon {
  transform: scale(1.05);
}

.coffee-info {
  margin-bottom: 30px;
}

.coffee-name {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.coffee-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--theme-color);
  margin: 0;
}

.sponsor-button-wrapper {
  margin-bottom: 30px;
}

.sponsor-button {
  background: var(--theme-color);
  color: white;
  border: none;
  padding: 10px 28px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 80px;
}

.sponsor-button:hover:not(:disabled) {
  background: var(--theme-color);
  opacity: 0.9;
  transform: scale(1.05);
}

.sponsor-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 咖啡描述 */
.coffee-description {
  color: #7f8c8d;
}

.coffee-description p {
  margin: 0 0 5px 0;
  font-size: 14px;
}

.small-text {
  font-size: 12px;
  opacity: 0.8;
}

/* 底部部分 */
.footer-section {
  text-align: center;
}

.footer-text {
  font-size: 16px;
  color: #95a5a6;
  margin: 0;
}

/* 支付弹窗 */
.payment-modal {
  padding: 20px 0;
}

.selected-coffee {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
}

.selected-coffee h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.total-price {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 8px 0;
}

.earning-text {
  color: #52c41a;
  font-size: 14px;
  margin: 5px 0 0 0;
}

/* 支付方式选择和二维码 */
.payment-method-selector {
  text-align: center;
  margin-bottom: 20px;
}

.qr-code-container {
  width: 300px;
  height: 300px;
  margin: 0 auto 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}

.qr-code {
  width: 300px;
  height: 300px;
  object-fit: contain;
}

.payment-method-text {
  color: #52c41a;
  font-size: 14px;
  margin: 0;
}

/* 支付方式单选 */
.payment-options {
  text-align: center;
  margin-bottom: 20px;
}

.payment-options .ant-radio-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* 数量选择 */
.quantity-selector {
  margin-bottom: 20px;
}

.quantity-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.quantity-option {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 60px;
}

.quantity-option:hover {
  border-color: #40a9ff;
  background: #f0f8ff;
}

.quantity-option.active {
  border-color: #1890ff;
  background: #e6f7ff;
  color: #1890ff;
}

.qty-text {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.qty-price {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.quantity-option.active .qty-price {
  color: #1890ff;
}

/* 支付描述 */
.payment-description {
  text-align: center;
  margin-bottom: 20px;
}

.payment-description p {
  color: #ff4d4f;
  font-size: 14px;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 36px;
  }

  .coffee-options {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .coffee-card {
    padding: 30px 20px;
  }
}
</style>
